<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.ort">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style>
        .layui-upload-img{
            border: 1px solid #1E9FFF;
            width: 200px;
            height: 200px;
            border-radius: 1px;;
        }
    </style>
</head>
<body>
<div class="layui-container" style="margin: 10px 0px; ">
    <form class="layui-form layui-form-pane">
        <input type="hidden" id="iconPath" name="iconPath" th:value="${c.iconPath}">
        <input type="hidden" id="photoPath" name="photoPath" th:value="${c.photoPath}">
        <input type="hidden" id="id" name="id" th:value="${c.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">类目名称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" th:value="${c.title}"name="title" lay-verify="required" placeholder="类目名必填" autocomplete="off"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" th:value="${c.keyword}"  name="keyword" />
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">级别</label>
                <div class="layui-input-inline" style="width: 90px;">
                    <input type="radio" name="level" lay-filter="level" value="0" title="一级类目" th:checked="*{c.level} eq 0"/>
                </div>
                <div class="layui-input-inline" style="width: 90px;">
                    <input type="radio" name="level" lay-filter="level" value="1" title="二级类目" th:checked="*{c.level} eq 1" />
                </div>
                <div class="layui-input-inline">
                    <input type="hidden"  name="pid" id="parentId" th:value="${c.pid}" />
                    <input type="hidden" id="pid" lay-filter="pTree"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item" >
            <div class="layui-inline" >


                <div class="layui-input-inline"  >
                    <label class="layui-form-label">类目图标</label>
                    <div class="layui-upload-list">
                        <img th:src="@{'/file/fc/showImg/'+${c.iconPath}}" class="layui-upload-img" id="icon">
                    </div>
                    <a class="layui-btn layui-btn-wram" id="checkPhoto1" style="width:200px" >
                        <i class="layui-icon layui-icon-add-1"></i>
                    </a>
                </div>

                <div class="layui-input-inline" style="left: 140px;" >
                    <label class="layui-form-label" style="left: auto;">类目图片</label>
                    <div class="layui-upload-list">
                        <img th:src="@{'/file/fc/showImg/'+${c.photoPath}}" class="layui-upload-img" id="photo">
                    </div>
                    <a class="layui-btn layui-btn-wram" id="checkPhoto2" style="width:200px" >
                        <i class="layui-icon layui-icon-add-1"></i>
                    </a>
                </div>

            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">类目简介</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="introduction"  autocomplete="off" th:text="${c.introduction}"></textarea>
            </div>
        </div>
    `
        <div class="layui-form-item" >
            <div class="layui-input-block" style="display: none;">
                <a class="layui-btn" id="submitBtn" lay-submit="" lay-filter="submitBtn">提交</a>
            </div>
        </div>
    </form>
</div>
<script>
    var $;
    layui.config({
        base:'../../../js/'
    })
    var $;
    layui.use(['form','jquery','upload','element','layer','treeSelect'],function () {
        var form = layui.form,
            upload = layui.upload,
            layer = layui.layer,
            treeSelect=layui.treeSelect;
        $ = layui.jquery;

        var photoUpload = upload.render({
            elem:'#checkPhoto1',
            url:'/file/fc/fileUpload',
            before: function (obj) {
                obj.preview(function (i,f,r) {
                    $('#icon').attr('src',r);
                });
            },
            done:function (res) {
                if(!res.is){
                    layer.alert('上传失败，请稍后再试......')
                }else{
                    $('#iconPath').val(res.file.id);
                }
            }
        })
        var photoUpload = upload.render({
            elem:'#checkPhoto2',
            url:'/file/fc/fileUpload',
            before: function (obj) {
                obj.preview(function (i,f,r) {
                    $('#photo').attr('src',r);
                });
            },
            done:function (res) {
                if(!res.is){
                    layer.alert('上传失败，请稍后再试......')
                }else{
                    $('#photoPath').val(res.file.id);
                }
            }
        })


        form.on('radio(level)',function(data){
            var value = data.value;
            if(value==0){
                $('#parentId').val(0);
                $('.layui-treeSelect').css('display','none');
            }else{
                $('.layui-treeSelect').css('display','block');
            }
        })

        treeSelect.render({
            elem:'#pid',
            placeholder:"父类目",
            search:true,
            data:'/category/cc/getCategoryJson',
            type:'get',
            success:function(data){
                var pid=$('#parentId').val();
                $('.layui-treeSelect').css('width','300px');
                if (pid==0||pid==undefined) {
                    $('.layui-treeSelect').css('display', 'none');
                }else{
                    treeSelect.checkNode('pTree',pid);
                }
            },
            click:function(data){
                var current = data.current;
                var pid = current.id;
                $('#parentId').val(pid);
            }
        })
        form.on('submit(submitBtn)',function (data){
            var formData=data.field;
            $.ajax({
                type: 'post',
                url:'/category/cc/update',
                data:formData,
                dataType:'json',
                success:function (result){
                    layer.msg(result.msg);
                    if (result.is){
                        let index=parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }
                }
            })
        })

    });
    function btnSubmit(){
        $('#submitBtn').click();
    }
</script>
</body>
</html>
